<template>
  <div
    class="app-container"
    v-loading="loading"
  >
    <el-descriptions
      title=""
      :column="3"
    >
      <el-descriptions-item label="用户昵称">{{ detail.userNickName }}</el-descriptions-item>

      <el-descriptions-item label="手机号">{{ detail.userPhone }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>

      <el-descriptions-item label="状态">{{ detail.status ? '禁用' : '正常' }}</el-descriptions-item>
      <el-descriptions-item label="星级">{{ detail.starLevel }}</el-descriptions-item>
    </el-descriptions>

    <div class="detail-image">
      <p>评价图片：</p>
      <ImagePreview
        v-for="item in detail.evaluateImg"
        :key="item"
        :src="item"
      >
      </ImagePreview>
    </div>
    <div class="detail-video">
      <p>视频：</p>
      <video
        v-if="detail.videoUrl"
        :src="domain + detail.videoUrl"
        controls="controls"
        style="width: 50px; height: 50px;"
      />
    </div>
    <div class="detail-video">
      <p>评价内容：</p>
      <div>
        {{ detail.content }}
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderGoodsEvaluateInfo } from "@/api/list/order/order-evaluate-list.js";
import { imgDomain } from '@/configs/env';
export default {
  data() {
    return {
      loading: false,
      detail: {},
      componentId: null,
      domain: imgDomain,
    };
  },
  created() {
    this.network().getDetail();
  },
  methods: {
    network() {
      return {
        getDetail: async () => {
          const { uuid = "" } = this.$route.params;
          this.loading = true;
          try {
            const { data } = await getOrderGoodsEvaluateInfo(uuid);
            this.loading = false;
            Object.assign(this.detail, data, {
              evaluateImg:
                typeof data.evaluateImg === "string"
                  ? data.evaluateImg.split(",")
                  : [],
            });
          } catch (error) {
            this.loading = false;
          }
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 40px;
}

::v-deep {
  .el-descriptions-item__container {
    display: flex;
  }
}

.detail-image {
  margin-top: 40px;

  p {
    font-size: 14px;
  }
}

.detail-video {
  margin: 20px 0;
  font-size: 14px;
}
</style>
